<template>
  <el-card class="box-card mt-4">
    <template #header>
      <div style="border-bottom: 1px">
        {{ props.title }}
        <el-button style="padding-left: 3px" type="text" @click="emits('addWindow')">
          添加
        </el-button>
      </div>
    </template>
    <el-table :data="materials" highlight-current-row border class="data-table__content">
      <el-table-column label="名称" prop="name" />
      <el-table-column label="市场价格" prop="price" width="150">
        <template #default="scope">
          {{ `￥${scope.row.price}` }}
        </template>
      </el-table-column>
      <el-table-column label="成本价" prop="price" width="150">
        <template #default="scope">
          {{ `￥${scope.row.costPrice}` }}
        </template>
      </el-table-column>
      <el-table-column label="单位" prop="unit" width="150" />
      <el-table-column label="规格" prop="spec" />
      <el-table-column label="数量" prop="num" width="180">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.num"
            :min="1"
            :precision="0"
            placeholder="请输入数量"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button
            :disabled="scope.row.systemd"
            type="danger"
            size="small"
            link
            icon="delete"
            @click="removeMaterial(scope)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { SealMealItem } from "@/api/business/material/sealMeal.api";

const props = defineProps<{
  title: string;
  data?: SealMealItem[];
}>();
const emits = defineEmits(["addWindow"]);
const materials = ref<SealMealItem[]>([]);

watch(
  () => props.data,
  (val) => {
    materials.value = val || [];
  }
);

/**
 * 添加
 * @param nList
 */
function addMaterial(nList: SealMealItem[]) {
  const existingIds = new Set(materials.value.map((item) => item.resourceId));
  const uniqueItems = nList.filter((item) => !existingIds.has(item.resourceId));
  if (uniqueItems.length > 0) {
    materials.value = [...materials.value, ...uniqueItems];
  }
}

/**
 * 删除
 * @param item
 */
function removeMaterial(scope: any) {
  materials.value.splice(scope.$index, 1);
}

function getData() {
  return materials.value;
}

defineExpose({
  addMaterial,
  getData,
});
</script>

<style lang="scss" scoped></style>
